<template>
  <div class="drug-order-detail-container">
    <!-- 页面标题和返回按钮 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          订单详情-{{
            orderDetail.orderStatusName ||
            getStatusText(orderDetail.orderStatus)
          }}
        </h1>
        <el-button type="primary" @click="handleBack" class="back-btn">
          返回
        </el-button>
      </div>
    </div>

    <!-- 订单信息 -->
    <div class="info-section">
      <div class="section-header">
        <h3>订单信息</h3>
      </div>
      <div class="section-content">
        <div class="info-row">
          <span class="label">订单编号：</span>
          <span class="value">{{ orderDetail.orderNo }}</span>
        </div>
        <div class="info-row">
          <span class="label">订单金额：</span>
          <span class="value amount"
            >¥{{ orderDetail.orderAmount?.toFixed(2) || "0.00" }}</span
          >
        </div>
        <div class="info-row">
          <span class="label">状态：</span>
          <span class="value">
            <el-tag :type="getStatusType(orderDetail.orderStatus)">
              {{
                orderDetail.orderStatusName ||
                getStatusText(orderDetail.orderStatus)
              }}
            </el-tag>
          </span>
        </div>
        <div class="info-row">
          <span class="label">提交时间：</span>
          <span class="value">{{
            formatDateTime(orderDetail.createTime)
          }}</span>
        </div>
      </div>
    </div>

    <!-- 货物信息 -->
    <div class="info-section">
      <div class="section-header">
        <h3>货物信息</h3>
      </div>
      <div class="section-content">
        <div
          v-if="
            orderDetail.goodsInfoList && orderDetail.goodsInfoList.length > 0
          "
        >
          <div
            v-for="(item, index) in orderDetail.goodsInfoList"
            :key="index"
            class="goods-item"
          >
            <div class="goods-header">
              <span class="goods-name">{{ item.drugName }}</span>
              <span class="goods-quantity">x{{ item.num }}</span>
            </div>
            <div class="goods-details">
              <div class="detail-row">
                <span class="label">规格：</span>
                <span class="value">{{ item.specif }}</span>
              </div>
              <div class="detail-row">
                <span class="label">用法：</span>
                <span class="value">{{ item.dosage }}</span>
              </div>
              <div class="detail-row">
                <span class="label">单价：</span>
                <span class="value">¥{{ item.unitPrice?.toFixed(2) }}</span>
              </div>
              <div class="detail-row">
                <span class="label">小计：</span>
                <span class="value amount"
                  >¥{{ item.subTotal?.toFixed(2) }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div v-else class="no-data">暂无货物信息</div>
      </div>
    </div>

    <!-- 收货人信息 -->
    <div class="info-section">
      <div class="section-header">
        <h3>收货人信息</h3>
      </div>
      <div class="section-content">
        <div class="info-row">
          <span class="label">收货人：</span>
          <span class="value">{{ orderDetail.consigneeInfo?.consignee }}</span>
        </div>
        <div class="info-row">
          <span class="label">电话：</span>
          <span class="value">{{ orderDetail.consigneeInfo?.phone }}</span>
        </div>
        <div class="info-row">
          <span class="label">收货地址：</span>
          <span class="value">{{
            orderDetail.consigneeInfo?.address || "暂无地址信息"
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { OrderAPI } from "../api/order";

const route = useRoute();
const router = useRouter();

// 订单详情数据
const orderDetail = ref({
  id: 0,
  orderNo: "",
  orderAmount: 0,
  orderStatus: 0,
  orderStatusName: "",
  createTime: "",
  consigneeInfo: {
    consignee: "",
    phone: "",
    address: "",
  },
  goodsInfoList: [] as any[],
});

// 药品订单状态枚举
const OrderStatus = {
  PENDING: 0, // 待发货
  SHIPPED: 5, // 待收货
  RECEIVED: 10, // 已收货
};

// 获取状态类型
const getStatusType = (status: number) => {
  const statusMap: Record<number, string> = {
    [OrderStatus.PENDING]: "warning",
    [OrderStatus.SHIPPED]: "primary",
    [OrderStatus.RECEIVED]: "success",
  };
  return statusMap[status] || "info";
};

// 获取状态文本
const getStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    [OrderStatus.PENDING]: "待发货",
    [OrderStatus.SHIPPED]: "待收货",
    [OrderStatus.RECEIVED]: "已收货",
  };
  return statusMap[status] || "未知";
};

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return "";
  try {
    const date = new Date(dateTime);
    return date.toLocaleString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    });
  } catch {
    return dateTime;
  }
};

// 返回上一页
const handleBack = () => {
  router.back();
};

// 加载订单详情
const loadOrderDetail = async () => {
  try {
    const orderId = route.params.id;
    if (!orderId) {
      ElMessage.error("订单ID不能为空");
      return;
    }

    console.log("加载订单详情，ID:", orderId);

    // 调用API获取订单详情
    const response = await OrderAPI.getDrugOrderDetail(Number(orderId));

    if (response && response.data) {
      orderDetail.value = response.data;
      console.log("订单详情加载成功:", orderDetail.value);
    } else {
      console.error("API响应格式错误:", response);
      ElMessage.error("订单详情加载失败");
    }
  } catch (error) {
    console.error("加载订单详情失败:", error);
    ElMessage.error("订单详情加载失败，请检查网络连接");
  }
};

// 组件挂载时加载数据
onMounted(() => {
  loadOrderDetail();
});
</script>

<style scoped>
.drug-order-detail-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.page-header {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.back-btn {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

.back-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.info-section {
  margin: 20px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
}

.section-header {
  background-color: #f8f9fa;
  padding: 12px 20px;
  border-bottom: 1px solid #e8e8e8;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.section-content {
  padding: 20px;
  background-color: #fff;
}

.info-row {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
}

.info-row:last-child {
  margin-bottom: 0;
}

.label {
  width: 100px;
  font-weight: 500;
  color: #666;
  flex-shrink: 0;
}

.value {
  color: #333;
  flex: 1;
}

.amount {
  color: #e6a23c;
  font-weight: 600;
  font-size: 16px;
}

.goods-item {
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
}

.goods-item:last-child {
  margin-bottom: 0;
}

.goods-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.goods-name {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.goods-quantity {
  color: #666;
  font-size: 14px;
}

.goods-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-row {
  display: flex;
  align-items: flex-start;
}

.detail-row .label {
  width: 60px;
  font-size: 13px;
  color: #999;
}

.detail-row .value {
  font-size: 13px;
  color: #666;
  flex: 1;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 20px;
  font-style: italic;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    padding: 15px 20px;
  }

  .page-title {
    font-size: 20px;
  }

  .info-section {
    margin: 15px;
  }

  .section-content {
    padding: 15px;
  }

  .info-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .label {
    width: auto;
    margin-bottom: 4px;
  }
}
</style>
